<!--
 @description 门店建设项
 @fileName ShopConstructItem.vue
 @author zengqiongying
 @created 2023/08/16 10:21:37
-->
<template>
  <div>
    <qmp-collapse v-model="activeNames" readonly accordion>
      <qmp-collapse-item v-for="(item, i) in list" :name="item.shopCode" :key="i" class="item">
        <!-- <Cell v-for="(item, i) in list" :key="i" is-column custom :right="false"> -->
        <template #title>
          <div class="collapse-title shop-item">
            <div class="title">
              {{ item.shopCode }} <span class="overLine">{{ item.shopName }} </span>
            </div>
            <img v-if="activeNames === item.shopCode" src="@/assets/images/solid-bottom.png" />
            <img v-else src="@/assets/images/solid-right.png" />
          </div>
        </template>
        <template #right-icon></template>
        <div class="edit-cell">
          <Cell title="门店建设项目号" default-value="--" :modelValue="item.constCode" readonly />
          <Cell
            title="所属阶段"
            :modelValue="item.belongStage"
            dictTypeCode="BELONG_STAGE"
            default-value="--"
            readonly
          />
          <Cell
            v-if="readonly"
            title="数据处理方式"
            default-value="--"
            dictTypeCode="CTM_SHOP_CONS_DATA_PROCESS_TYPE"
            :modelValue="item.handleType"
            readonly
          />
          <FieldPicker
            v-else
            v-model="item.handleType"
            title="数据处理方式"
            placeholder="请选择"
            :url="`/data-dict/app/v2/dictionary/CTM_SHOP_CONS_DATA_PROCESS_TYPE`"
            label-name="dictName"
            value-name="dictCode"
            method="get"
            :params="dictParams"
            clear
            required
            @change="handleTypeChange"
          />
        </div>
      </qmp-collapse-item>
    </qmp-collapse>
  </div>
</template>
<script lang="ts">
  import { reactive, toRefs, defineComponent, getCurrentInstance } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldPicker from '@/components/FieldPicker/index.vue'

  export default defineComponent({
    name: 'ShopConstructItem',
    components: { Cell, FieldPicker },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      readonly: {
        type: Boolean,
        default: true
      },
      dictData: {
        type: Object,
        default: () => {
          return {
            CTM_SHOP_CONS_DATA_PROCESS_TYPE: [], // 处理类型
            BELONG_STAGE: [] //所处阶段
          }
        }
      }
    },
    setup(props) {
      const tmpObj: any = props.list.length > 0 ? props.list[0] : ''
      const activeNames: string = tmpObj.shopCode || ''
      const instance = getCurrentInstance()
      const { proxy }: any = instance

      const datas = reactive({
        activeNames: activeNames,
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 }
      })

      const getDictName = (dictType: string, code: any) => {
        if (!dictType || [undefined, null, ''].includes(code)) return ''
        let name = code
        const dictList = props.dictData[dictType] || []
        if (dictList.length > 0) {
          const obj = dictList.find((v: any) => v.dictCode === `${code}`)
          name = obj?.dictName || code
        }
        return name
      }

      const handleTypeChange = (val: any) => {
        const map: any = {
          A: '请及时到SLM系统-门店建设跟进管理-门店建设整体跟进模块，勾选要终止的门店，选择“建设终止”按钮提交申请',
          B: '请及时到SLM系统-门店建设跟进管理-门店建设整体跟进板块-勾选要交接的门店，选择“市场交接”按钮提交申请！'
        }
        const msg = map[val.dictCode]
        proxy.$toast(msg)
      }

      return {
        ...toRefs(datas),
        // getDictName,
        handleTypeChange
      }
    }
  })
</script>
<style lang="less" scoped>
  .shop-item {
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);
    div:not(:last-child) {
      margin-bottom: 4px;
    }
    .title {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
    }
  }

  .edit-cell {
    margin: 0 -16px;
    /deep/ .c-cell {
      padding: 10px 14px 0;
      min-height: 20px;
      &::after {
        border: 0;
      }
      .label {
        margin-bottom: 0 !important;
      }
      .value .text {
        text-align: right;
      }
    }
  }

  .collapse-title {
    display: flex;
    align-items: center;
    font: var(--font-main-body);
    color: var(--texticon-default-strong);

    img {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
  }

  .qmp-hairline--top-bottom::after,
  .qmp-hairline-unset--top-bottom::after {
    display: none;
  }
</style>
